import React, { Component } from 'react';
import Logo from '../../component/logo/logo.js'
import { List,InputItem,WingBlank,Button,WhiteSpace } from 'antd-mobile';
import { connect } from 'react-redux'
import { Redirect } from 'react-router-dom'
import { login } from '../../redux/user.redux'


class Login extends Component {
  constructor(props) {
    super(props);
    this.state={
      user:'',
      pwd:''
    }
    this.regiest = this.regiest.bind(this)
    this.login = this.login.bind(this)
  }

  regiest(){
    this.props.history.push('/regiest')
  }
  handleChange(type,value){
    this.setState({
      [type]:value
    })
  }
  login(){
    this.props.login(this.state)
  }
  render() {
    return (
      <div className="login">
        {(this.props.redirectTo&&this.props.redirectTo!=='/login')?<Redirect to={this.props.redirectTo}></Redirect>:null}
        <Logo></Logo>      
        <WingBlank>
          {this.props.msg? <p className="err">{this.props.msg}</p>:null}
            <List>
               <InputItem onChange={v=>this.handleChange('user',v)}>账号</InputItem>
               <WhiteSpace/>
               <InputItem onChange={v=>this.handleChange('pwd',v)} type="password">密码</InputItem>
            </List>
            <WhiteSpace />
            <Button type="primary" onClick={this.login}>登录</Button>
            <WhiteSpace />
            <Button type="primary" onClick={this.regiest}>注册</Button>
        </WingBlank>
      </div>
    );
  }
}

const mapStatetoProps =(state)=>{
  return state.user
}

const actionCreators = {login}
Login = connect(mapStatetoProps,actionCreators)(Login)
export default Login;

